<template>
  <section class="memberCompany">
    <el-row :span="24" class="action-bar" >
      <el-button type="primary" size="medium" @click="toMember">返回会员管理</el-button>
      <el-button type="primary" size="medium" @click="editor" v-if="this.vipId!==''">绑定企业信息</el-button>
      
    </el-row>
    <!--列表-->
		<el-table :data="myCompany" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55"/>
			<el-table-column type="index" width="60"/>
			<el-table-column prop="company_name" label="企业名称" width="180"/>
			<el-table-column prop="position" label="职位" width="150"/>
      <el-table-column prop="updated_at" label="绑定时间" width="180"/>
			<el-table-column label="操作" width="250">
        <template slot-scope="scope">
				  <el-button type="danger" size="mini" @click="deleteCompany(scope.row.id,scope.row.company_id)">删除</el-button>
        </template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
        <el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
      </div>
    </el-col>

    <!-- 弹出的编辑窗口 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      height="50%"
      center
      class="editor-dialog"
      >
      <el-form :label-position="'left'" label-width="80px" >
        <el-form-item label="企业名称">
          <!-- <el-input v-model="member.name"></el-input> -->
          <el-select
            v-model="companyName"
            filterable
            remote
            reserve-keyword
            placeholder="请输入企业名字"
            :remote-method="companyInfoSearch"
            >
            <el-option
            v-for="item in companyList"
            :key="item.value"
            :label="item.company_name"
            :value="item.id">
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="填写职位">
          <el-input placeholder="填写职位" v-model="position"></el-input>
        </el-form-item>
        <div class="tip">
            找不到到企业?<span @click="toEnterprise">点击前往添加</span>
        </div>
            
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bandCompany">绑定企业</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
export default {
	data(){
		return {
      myCompany:[],
      dropColumnName:'选择筛选的状态',
      dialogVisible:false,//编辑状态的弹窗
      searchType:'',//筛选的状态
      searchTypeOptions:[
        {value:'全部'},
        {value:'已缴费'},
        {value:'未缴费'},
      ],
      companyName:'',//搜索的关键字
    companyList:[],//搜索得出的企业信息
    position:'',
    totalPage:0,
    page:1,
    vipId:''
		}
  },
  methods: {
    columnChange(e){
      //选中筛选类别
      this.dropColumnName=e
    },
    editor(){
      //对缴费用户进行编辑
      this.dialogVisible = true
    },
    handleClose(){
      //编辑弹窗关闭前的回调

    },
    async bandCompany(){
        //绑定企业
        const res=await this.$api.userBindCompany({
          type:'houtai',
          vip_id:this.vipId,
          company_id:this.companyName,
          position:this.position
        })
        if(res.data.level=='success'){
          //更新列表
          this.$message({
            type:'success',
            message:res.data.message
          })
          this.dialogVisible = false;
          this.getUserReCompanyInfoList();
        }else{
          this.$message({
            type:'error',
            message:res.data.message
          })
        }
        
        
    },
    async deleteCompany(id,companyId){
      //取消绑定
      const judge= this.$confirm('取消绑定该企业?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.getUserReCompanyInfoDelete({
              id,
              company_id:companyId,
              vip_id:this.vipId
            })
					if(res.data.level=='success'){
						this.getUserReCompanyInfoList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
      
    },
    async companyInfoSearch(e){
        //搜索企业
      const res=await  this.$api.companyInfoSearch({
            key_word:e
        })
        if(res.data.level=='success'){
            this.companyList=res.data.data
        }
    },
    async getUserReCompanyInfoList(){
      //获取个人绑定企业
      const res=await this.$api.getUserReCompanyInfoList({
        vipId:this.vipId,
        type:'company'
      })
      if(res.data.level=='success'){
        this.myCompany=res.data.data.user_re_company_info;
        this.totalPage=res.data.data.lastPage
      }
    },
    pageChange(e){
			//翻页
			this.page=e;
			this.getUserReCompanyInfoList()
		},
    toEnterprise(){
        //跳转添加企业信息
        this.$router.replace('Enterprise')
    },
    toMember(){
      //返回会员管理
      this.$router.push('Member')
    }
  },
  mounted() {
    if(isNaN(this.$route.params.vipId)==false){
      this.vipId=this.$route.params.vipId//会员id
    }
      this.getUserReCompanyInfoList();
      this.companyInfoSearch()
  },
}
</script>
<style lang='scss' scoped>
  .memberCompany{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
            margin: 10px 0px;
            box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
            background: #f2f2f2;
            padding: 8px;
            margin: 10px 0px;
            box-sizing: border-box;
                }
		.dialog-footer{
			text-align: center;
		}
        .tip{
            margin-top:50px;
            span{
                cursor: pointer;
                color:red;
            }
        }
  }
</style>

<style>

	
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

 .memberCompany .el-dialog__body{overflow: auto;}
</style>
